<template>
	<div>
		<div class="header">
			<img @click="back" src="../../assets/nav_back.png"/>
			<span>问题反馈</span>
			<span class="img"></span>
		</div>
		<textarea v-model="text" id="textarea" maxlength="200" placeholder="请留下你的宝贵意见，我们客服将及时解答您的问题！"></textarea>
		<p>{{num}} <span>/200</span></p>
		<v-button buttonText='提交' :isActive='isActive' topNum='0.8rem' @toNext='login' ></v-button>
	</div>
</template>
<script>
	import my from '@/api/my/index'
	import Button from '@/components/Button'
	import { toast} from '@/util/index'
  export default {
    data () {
      return {
      	  text:"",
      	  num:0,
      }
    },
  	components: {
		'v-button': Button
	},
	computed: {
		isActive() {
			if (this.text){
				return true
			} else {
				return false
			}
		}
	},
	computer:{
		text(){
			console.log(this.text.length);
		}
	},
	watch:{
		text(val){
			this.num=val.length;
		}
		
	},
    methods: {
    	
     	back() {
			this.$router.back(-1)
		},
		login(){
			let senddata = {
				userId:window.localStorage.getItem("token"),
				suggestion:this.text,
				plat:"mlj"
			}
			if(this.isActive){
				my.suggestion(senddata).then((res) => {
					if (res.data.code == 200) {
					 	this.text="";
					 	this.$router.push({path: '/toServiceCenter'});
					 	toast(res.data.message)
					}else if(res.data.code==222){
			            this.$router.push({path:'/login'})
			        } else {
						toast(res.data.message)
					}
				})
			}
			
		}
    },
     beforeRouteEnter(to,from,next){
	    document.querySelector('title').innerText='谋略家'
	      next()
	  }
    
  }
</script>
<style lang="less" scoped>
@import '../../less/config.less';
.header{
	padding:0 @p30;
	display: flex;
	justify-content:space-between;
	align-items: center;
	height:@hwrap;
	color:#fff;
	font-size:.48rem;
	background:#000;
	img,.img{
		width: @p30;
		height: @p30;
	}
}
textarea{
	width: 100%;
	height: 4.24rem;
	border: none;
	background: #1f232e;
	color: white;
	font-size: @f28;
	padding:0.48rem @p30;
	padding-bottom:@p30*2 ;
	border: none;
	
}
input::-webkit-input-placeholder {
	/* WebKit browsers*/
	color: #56627c;
}
input::-moz-placeholder {
	/* Mozilla Firefox 4 to 18*/
	color:#56627c;
}
input::-moz-placeholder {
	/* Mozilla Firefox 19+*/
	color: #56627c;
}
input:-ms-input-placeholder {
	/* Internet Explorer 10+*/
	color: #56627c;
}
p{
		color: white;
		right: 0;
		bottom: 0;
		text-align: right;
		padding-right:@p30 ;
		background: #1f232e;
		margin-top: -0.1rem;
	}
</style>